<template>
  <div class="min-h-screen bg-orange-50">
    <!-- 顶部轮播 -->
    <div class="w-full">
      <n-carousel autoplay interval="3000">
        <img class="w-full h-[500px] object-cover" :src="i" v-for="i in bannerImage" :key="i" />
      </n-carousel>
    </div>

    <!-- 主内容 -->
    <main class="max-w-7xl mx-auto px-4 py-16">
      <!-- 引导区 -->
      <div class="text-center mb-20">
        <h1 class="text-4xl font-bold text-orange-800 mb-6">
          探索您的心理健康状态
        </h1>
        <p class="text-lg text-gray-600 mb-8">
          基于AI的专业心理测评，助您更好地了解自己
        </p>
        <n-button type="primary" color="#fb923c" size="large" @click="$router.push('/assessment')" class="!text-white">
          立即开始测评
        </n-button>
      </div>

      <!-- 优势卡片 -->
      <n-grid cols="1 s:2 m:3" x-gap="24" y-gap="24" class="mb-20">
        <n-gi v-for="(item, index) in features" :key="index">
          <div class="bg-white/70 backdrop-blur-sm rounded-3xl p-8 h-full shadow-lg">
            <n-icon :component="item.icon" class="text-4xl mb-4 text-orange-600" />
            <h3 class="text-xl font-semibold mb-2">{{ item.title }}</h3>
            <p class="text-gray-600">{{ item.desc }}</p>
          </div>
        </n-gi>
      </n-grid>

      <!-- 用户评价 -->
      <section class="mb-20">
        <h2 class="text-3xl font-bold text-center mb-12 text-orange-800">
          用户评价
        </h2>
        <n-carousel draggable>
          <div v-for="(testimonial, index) in testimonials" :key="index" class="p-4 h-full">
            <div class="bg-white/70 backdrop-blur-sm rounded-3xl p-8 h-full shadow-lg">
              <div class="flex items-center mb-4">
                <n-avatar round :src="testimonial.avatar" class="mr-4" />
                <div>
                  <p class="font-semibold">{{ testimonial.name }}</p>
                  <n-rate readonly :value="5" class="text-orange-500" />
                </div>
              </div>
              <p class="text-gray-600 italic">"{{ testimonial.comment }}"</p>
            </div>
          </div>
        </n-carousel>
      </section>
    </main>
  </div>
</template>

<script setup>
import { NCarousel, NButton, NGrid, NGi, NIcon, NAvatar, NRate } from 'naive-ui'
import { AccessibilityOutline, LockClosedOutline, AnalyticsOutline } from '@vicons/ionicons5'

const features = [
  {
    icon: AccessibilityOutline,
    title: '专业可信',
    desc: '基于心理学权威理论开发的测评模型'
  },
  {
    icon: LockClosedOutline,
    title: '隐私保护',
    desc: '全程加密处理，保障您的数据安全'
  },
  {
    icon: AnalyticsOutline,
    title: '智能分析',
    desc: 'AI生成个性化解读报告和建议'
  }
]
const bannerImage = [
  'https://images.unsplash.com/photo-1587967864638-768fd46ac9eb?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1569396116180-210c182bedb8?q=80&w=3538&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

]
const testimonials = [
  {
    avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
    name: '李女士',
    comment: '测评结果非常准确，给出的建议很实用帮助我缓解了焦虑情绪'
  },
  {
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    name: '王先生',
    comment: '界面友好操作简单，测评过程就像和朋友聊天一样自然'
  }
]
</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 688px;
  object-fit:cover;
}
</style>